.tableFieldWrapper {
  display: grid;
  grid-template-areas: 'label' 'table';
}

.tableFieldWrapper label {
  grid-area: label;
  text-align: start;
}

.tableFieldWrapper table {
  border-collapse: collapse;
  grid-area: table;
  max-width: 100%;
}

.tableFieldWrapper th {
  color: var(--accent);
  font-size: var(--text-lg);
  padding: var(--space-xs-fixed);
  text-align: start;
}

/* using max and min width on purpose, width doesn't work as expected on these */
.tableFieldWrapper tr {
  max-width: 100%;
  display: grid;
  grid-template-columns: 150px min-content auto min-content;
}

.tableFieldWrapper td {
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--space-xs-fixed) m;
}

.tableFieldWrapper td:last-child {
  padding: 0;
}

.tableFieldWrapper td span {
  padding: var(--space-2xs-fixed) 0;
  text-align: start;
  overflow: auto;
  white-space: nowrap;
}

.tableFieldWrapper tbody tr:nth-child(even),
.tableFieldWrapper tbody tr:nth-child(even) span::-webkit-scrollbar {
  background-color: var(--input-background);
}

.tableFieldWrapper th:last-child button,
.tableFieldWrapper th:last-child button svg,
.tableFieldWrapper td:last-child button,
.tableFieldWrapper td:last-child button svg {
  display: block;
}

.tableFieldWrapper tfoot tr:first-child td {
  padding-top: 1rem;
}

.tableFieldWrapper tfoot .Field {
  margin: 0;
}

.tableFieldWrapper tfoot .Field label {
  display: none;
}

.tableFieldWrapper tfoot td {
  padding: 0;
}

.tableFieldWrapper tfoot td:not(:last-child) {
  padding-inline-end: 0.2rem;
}

.tableFieldWrapper input[type='text'] {
  text-indent: 0.5rem;
}

.tableFieldWrapper tfoot tr.dirty {
  display: flex;
}

.tableFieldWrapper tfoot tr.dirty td {
  padding-top: 0.2rem;
  justify-self: flex-end;
  flex-grow: 1;
}

.tableFieldWrapper tfoot tr.dirty span {
  white-space: normal;
  text-align: end;
  flex-grow: 1;
}

.tableFieldWrapper tfoot tr.dirty td svg {
  margin: 0 var(--space-sm-fixed);
}

.tableFieldWrapper tfoot tr.error {
  display: table-row;
}

.tableFieldWrapper tfoot tr.error td {
  display: table-cell;
  text-align: start;
  padding-top: 0.2rem;
}

.tableFieldWrapper .Field.error input {
  border: 1px solid red;
  outline: none;
}
